<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>134-动画-匀速动画-处理透明度.html</title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		#box{
			widows: 200px;
			height: 200px;
			background-color: #f00;
			opacity: 0.5;
			margin-top: 20px;
		}
		/*.line{
			width: 1px;
			height: 400px;
			background: #000;
			position: absolute;
			top: 0;
			left: 400px;
		}*/
		.container{
			width: 400px;
			margin: 100px auto;
		}
	</style>
</head>
<body>
	<div class="container">
		<button id="btn">开始动画</button>
			<div id="box">
				<!-- <div class="line"></div> -->
			</div>
	</div>
</body>
<script>
	var oBtn = document.getElementById('btn');
	var oBox = document.getElementById('box');
	var timer = 0;
	oBtn.onclick = function(){
		clearInterval(timer);
		// console.log(typeof getComputedStyle(oBox,false)["opacity"]);
		var iSpeed = 0;
		timer = setInterval(function(){
			var currentVal =parseFloat(getComputedStyle(oBox,false)["opacity"]);
			currentVal = currentVal * 100;
			if(currentVal > 100){
				iSpeed = -15;
			}else{
				iSpeed = 15;
			}	
			if(Math.abs(100 - currentVal) < Math.abs(iSpeed)){
				oBox.style.opacity = '1';
				clearInterval(timer);
			}else{
				oBox.style.opacity = (currentVal + iSpeed)/100;
			}
			
		},30)
		
	}


</script>
</html>